<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="tag" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<tag:head title="数据统计" ctx="${ctx}"></tag:head>
<tag:body>
	<!-- 左 上 导航 -->
	<tag:nav ctx="${ctx}">
        <!-- bootstrap-progressbar -->
        <link href="${ctx}/assets/css/bootstrap/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
        <!-- bootstrap-daterangepicker -->
        <link href="${ctx}/assets/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
    </tag:nav>

	<!-- page content -->
	<tag:content title="统计">
		<!-- top tiles -->
		<div class="row tile_count">
				<div id="staffCount" class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
					<span class="count_top"><i class="fa fa-user"></i> 员工总数</span>
					<div class="count">${requestScope.presentMonthCount.staffCount}</div>
				</div>
				<div id="bookCount" class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
					<span class="count_top"><i class="fa fa-clock-o"></i> 图书总数</span>
					<div class="count">${requestScope.presentMonthCount.bookCount}</div>
				</div>
				<div id="borrowCount" class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
					<span class="count_top"><i class="fa fa-user"></i> 借阅总数</span>
					<div class="count green">${requestScope.presentMonthCount.borrowCount}</div>
				</div>
				<div id="evaluateCount" class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
					<span class="count_top"><i class="fa fa-user"></i> 评论总数</span>
					<div class="count">${requestScope.presentMonthCount.evaluateCount}</div>
				</div>
				<%--<div id="paymentCount" class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">--%>
					<%--<span class="count_top"><i class="fa fa-user"></i> 罚款总费用(元)</span>--%>
					<%--<div class="count">${requestScope.presentMonthCount.paymentCount}</div>--%>
				<%--</div>--%>
				<div id="searchCount" class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
					<span class="count_top"><i class="fa fa-user"></i> 总搜索次数</span>
					<div class="count">7${requestScope.presentMonthCount.searchCount}</div>
				</div>
			</div>
        <div class="col-md-4 col-sm-4 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>类别热度统计</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">

                    <div id="echart_pie" style="height:350px;"></div>

                </div>
            </div>
        </div>
		<!-- /top tiles -->
		<div class="clearfix"></div>
	</tag:content>
	<!-- page content -->

	<!-- footer content -->
	<tag:footer></tag:footer>

</tag:body>
<!-- jQuery -->
<script src="${ctx}/assets/js/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="${ctx}/assets/js/bootstrap/bootstrap.min.js"></script>
<!-- jQuery custom content scroller -->
<script src="${ctx}/assets/js/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- Custom Theme Scripts -->
<script src="${ctx}/assets/js/custom/custom.min.js"></script>
<!-- Table -->
<script src="${ctx}/assets/js/admin/table/table.js"></script>
<!-- Global funtions -->
<script src="${ctx}/assets/js/global_function/global_function.js"></script>
<!-- ECharts -->
<script src="${ctx}/assets/js/Chart.js/dist/Chart.js"></script>
<script src="${ctx}/assets/js/echarts/dist/echarts.min.js"></script>
<script src="${ctx}/assets/js/echarts/map/js/world.js"></script>

<script>
    var $span = $("span.glyphicon");
    $span.text("${requestScope.success}");
    $(document).ready(function () {
        <c:if test="${requestScope.lastMonthCount != null}">
            appendContrastElem($("#staffCount"),${requestScope.presentMonthCount.staffCount},${requestScope.lastMonthCount.staffCount});
            appendContrastElem($("#bookCount"),${requestScope.presentMonthCount.bookCount},${requestScope.lastMonthCount.bookCount});
            appendContrastElem($("#borrowCount"),${requestScope.presentMonthCount.borrowCount},${requestScope.lastMonthCount.borrowCount});
            appendContrastElem($("#evaluateCount"),${requestScope.presentMonthCount.evaluateCount},${requestScope.lastMonthCount.evaluateCount});
            <%--appendContrastElem($("#paymentCount"),${requestScope.presentMonthCount.paymentCount},${requestScope.lastMonthCount.paymentCount});--%>
            appendContrastElem($("#searchCount"),${requestScope.presentMonthCount.searchCount},${requestScope.lastMonthCount.searchCount});
        </c:if>

        var $statisticElem = $("i.statistic");

        for(var i = 0; i < $statisticElem.length;++i){
            switch(i)
            {
                case 0:
                    $statisticElem.eq(i).addClass("blue");
                    break;
                case 1:
                    $statisticElem.eq(i).addClass("green");
                    break;
                case 2:
                    $statisticElem.eq(i).addClass("purple");
                    break;
                case 3:
                    $statisticElem.eq(i).addClass("aero");
                    break;
                case 4:
                    $statisticElem.eq(i).addClass("red");
                    break;
            }
        }

    });
    
    var $ascElem = $("<span class='count_bottom'> <i class='green'><i class='fa fa-sort-asc'></i></i>" +
                    "&nbsp; 较上个月</span>");
    var $descElem = $("<span class='count_bottom'> <i class='red'><i class='fa fa-sort-desc'></i></i>" +
            "&nbsp; 较上个月</span>");

    function appendContrastElem(e,num1,num2) {
        if(num1 > num2){
            $(e).append($ascElem.clone().children("i").append(toDecimal2((num1 - num2)/num2)*100 + "%").parent());
        }else{
            $(e).append($descElem.clone().children("i").append(toDecimal2((num2 - num1)/num2)*100 + "%").parent());
        }
    }

    //保留两位小数
    function toDecimal2(x) {
        var f = parseFloat(x);
        if (isNaN(f)) {
            return false;
        }
        var f = Math.round(x*100)/100;
        var s = f.toString();
        var rs = s.indexOf('.');
        if (rs < 0) {
            rs = s.length;
            s += '.';
        }
        while (s.length <= rs + 2) {
            s += '0';
        }
        return s;
    }
</script>
<!-- Doughnut Chart -->
<script>
    $(document).ready(function(){
        var options = {
            legend: false,
            responsive: false
        };

        new Chart(document.getElementById("canvas1"), {
            type: 'doughnut',
            tooltipFillColor: "rgba(51, 51, 51, 0.55)",
            data: {
                labels: [
                     <c:forEach items="${requestScope.statistics}" var="statistic">
                        "${statistic.bookClass.name}",
                    </c:forEach>
                ],
                datasets: [{
                    data: [
                            <c:forEach items="${requestScope.statistics}" var="statistic">
                                ${statistic.percentage},
                            </c:forEach>
                           ],
                    backgroundColor: [
                        "#3498DB",
                        "#26B99A",
                        "#9B59B6",
                        "#BDC3C7",
                        "#E74C3C",
                    ],
                    hoverBackgroundColor: [
                        "#49A9EA",
                        "#36CAAB",
                        "#B370CF",
                        "#CFD4D8",
                        "#E95E4F",
                    ]
                }]
            },
            options: options
        });
    });

    var theme = {
        color: [
            '#26B99A', '#34495E', '#BDC3C7', '#3498DB',
            '#9B59B6', '#8abb6f', '#759c6a', '#bfd3b7'
        ],

        title: {
            itemGap: 8,
            textStyle: {
                fontWeight: 'normal',
                color: '#408829'
            }
        },

        dataRange: {
            color: ['#1f610a', '#97b58d']
        },

        toolbox: {
            color: ['#408829', '#408829', '#408829', '#408829']
        },

        tooltip: {
            backgroundColor: 'rgba(0,0,0,0.5)',
            axisPointer: {
                type: 'line',
                lineStyle: {
                    color: '#408829',
                    type: 'dashed'
                },
                crossStyle: {
                    color: '#408829'
                },
                shadowStyle: {
                    color: 'rgba(200,200,200,0.3)'
                }
            }
        },

        dataZoom: {
            dataBackgroundColor: '#eee',
            fillerColor: 'rgba(64,136,41,0.2)',
            handleColor: '#408829'
        },
        grid: {
            borderWidth: 0
        },

        categoryAxis: {
            axisLine: {
                lineStyle: {
                    color: '#408829'
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['#eee']
                }
            }
        },

        valueAxis: {
            axisLine: {
                lineStyle: {
                    color: '#408829'
                }
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)']
                }
            },
            splitLine: {
                lineStyle: {
                    color: ['#eee']
                }
            }
        },
        timeline: {
            lineStyle: {
                color: '#408829'
            },
            controlStyle: {
                normal: {color: '#408829'},
                emphasis: {color: '#408829'}
            }
        },

        k: {
            itemStyle: {
                normal: {
                    color: '#68a54a',
                    color0: '#a9cba2',
                    lineStyle: {
                        width: 1,
                        color: '#408829',
                        color0: '#86b379'
                    }
                }
            }
        },
        map: {
            itemStyle: {
                normal: {
                    areaStyle: {
                        color: '#ddd'
                    },
                    label: {
                        textStyle: {
                            color: '#c12e34'
                        }
                    }
                },
                emphasis: {
                    areaStyle: {
                        color: '#99d2dd'
                    },
                    label: {
                        textStyle: {
                            color: '#c12e34'
                        }
                    }
                }
            }
        },
        force: {
            itemStyle: {
                normal: {
                    linkStyle: {
                        strokeColor: '#408829'
                    }
                }
            }
        },
        chord: {
            padding: 4,
            itemStyle: {
                normal: {
                    lineStyle: {
                        width: 1,
                        color: 'rgba(128, 128, 128, 0.5)'
                    },
                    chordStyle: {
                        lineStyle: {
                            width: 1,
                            color: 'rgba(128, 128, 128, 0.5)'
                        }
                    }
                },
                emphasis: {
                    lineStyle: {
                        width: 1,
                        color: 'rgba(128, 128, 128, 0.5)'
                    },
                    chordStyle: {
                        lineStyle: {
                            width: 1,
                            color: 'rgba(128, 128, 128, 0.5)'
                        }
                    }
                }
            }
        },
        gauge: {
            startAngle: 225,
            endAngle: -45,
            axisLine: {
                show: true,
                lineStyle: {
                    color: [[0.2, '#86b379'], [0.8, '#68a54a'], [1, '#408829']],
                    width: 8
                }
            },
            axisTick: {
                splitNumber: 10,
                length: 12,
                lineStyle: {
                    color: 'auto'
                }
            },
            axisLabel: {
                textStyle: {
                    color: 'auto'
                }
            },
            splitLine: {
                length: 18,
                lineStyle: {
                    color: 'auto'
                }
            },
            pointer: {
                length: '90%',
                color: 'auto'
            },
            title: {
                textStyle: {
                    color: '#333'
                }
            },
            detail: {
                textStyle: {
                    color: 'auto'
                }
            }
        },
        textStyle: {
            fontFamily: 'Arial, Verdana, sans-serif'
        }
    };
    var echartPie = echarts.init(document.getElementById('echart_pie'), theme);

    echartPie.setOption({
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            x: 'center',
            y: 'bottom',
            data: ['Direct Access', 'E-mail Marketing', 'Union Ad', 'Video Ads', 'Search Engine']
        },
        toolbox: {
            show: true,
            feature: {
                magicType: {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore: {
                    show: false,
                    title: "Restore"
                },
                saveAsImage: {
                    show: false,
                    title: "Save Image"
                }
            }
        },
        calculable: true,
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '48%'],
            data: [
                <c:forEach items="${requestScope.statistics}" var="statistic">
                {
                    value: ${statistic.percentage},
                    name: '${statistic.bookClass.name}'
                },
                </c:forEach>
            ]
        }]
    });
</script>
<!-- /Doughnut Chart -->
</html>
